# Quick Start

## Online Example

We provide an online example based on Rsbuild. The example gives an intuitive feel for the build performance of Rspack and the development experience of Rsbuild:

- [Rsbuild codesandbox example](https://codesandbox.io/p/github/rspack-contrib/rsbuild-codesandbox-example)

## Setup Environment

Before getting started, you will need to install [Node.js](https://nodejs.org/) >= version 16, it is recommended to use the Node.js LTS version.

Check the current Node.js version with the following command:

```bash
node -v
```

If you do not have Node.js installed in current environment, or the installed version is too low, you can use [nvm](https://github.com/nvm-sh/nvm) or [fnm](https://github.com/Schniz/fnm) to install.

Here is an example of how to install via nvm:

```bash
# Install Node.js LTS
nvm install --lts
# Switch to Node.js LTS
nvm use --lts
```

## Creating an Rsbuild Project

You can use the `create-rsbuild` to create a new Rsbuild project. Just execute the following command:

import { PackageManagerTabs } from '@theme';

<PackageManagerTabs
  command={{
    npm: 'npm create rsbuild@latest',
    yarn: 'yarn create rsbuild',
    pnpm: 'pnpm create rsbuild@latest',
    bun: 'bun create rsbuild@latest',
  }}
/>

Then follow the prompts to complete the operation.

### Templates

When creating a project, uou can choose from the following templates provided by `create-rsbuild`:

| Template | Description                     | Optional Features |
| -------- | ------------------------------- | ----------------- |
| react    | [React 18](https://react.dev/)  | TypeScript        |
| vue3     | [Vue 3](https://vuejs.org/)     | TypeScript        |
| vue2     | [Vue 2](https://v2.vuejs.org/)  | TypeScript        |
| lit      | [Lit](https://lit.dev/)         | TypeScript        |
| preact   | [Preact](https://preactjs.com/) | TypeScript        |
| svelte   | [Svelte](https://svelte.dev/)   | TypeScript        |
| solid    | [Solid](https://solidjs.com/)   | TypeScript        |
| vanilla  | Vanilla JavaScript              | TypeScript        |

### Optional Tools

`create-rsbuild` can help you set up some commonly used tools, including [Biome](https://github.com/biomejs/biome), [ESLint](https://github.com/eslint/eslint), and [prettier](https://github.com/prettier/prettier). You can use the arrow keys and the space bar to make your selections. If you don't need these tools, you can simply press Enter to skip.

```text
◆  Select additional tools (press enter to continue)
│  ◻ Add Biome for code linting and formatting
│  ◻ Add ESLint for code linting
│  ◻ Add Prettier for code formatting
└
```

:::tip
Biome provides similar linting and formatting features to ESLint and Prettier. If you select Biome, you typically won't need to choose ESLint or Prettier as well.
:::

### Current Directory

If you need to create a project in the current directory, you can set the target folder to `.`:

```text
◆  Create Rsbuild Project
│
◇  Input target folder
│  .
│
◇  "." is not empty, please choose:
│  Continue and override files
```

## Migrate from Existing Projects

If you need to migrate from an existing project to Rsbuild, you can refer to the following guides:

- [Migrate from Webpack](/guide/migration/webpack)
- [Migrate from Create React App](/guide/migration/cra)
- [Migrate from Vue CLI](/guide/migration/vue-cli)
- [Migrate from Vite](/guide/migration/vite)
- [Migrate from Modern.js Builder](/guide/migration/modern-builder)

### Other Projects

For other types of projects, you can manually install the [@rsbuild/core](https://www.npmjs.com/package/@rsbuild/core) package:

<PackageManagerTabs command="add @rsbuild/core -D" />

Then refer to the guide and documentation to enable the features you need:

- See [CLI](/guide/basic/cli) to learn about available CLI commands.
- See [Plugin List](/plugins/list/index) to select Rsbuild plugins.
- See [Configure Rsbuild](/guide/basic/configure-rsbuild) to configure Rsbuild.

## Command Line Interface

Rsbuild comes with a lightweight CLI that includes commands such as `dev` and `build`.

```json title="package.json"
{
  "scripts": {
    // starting the dev server
    "dev": "rsbuild dev",
    // build the app for production
    "build": "rsbuild build",
    // preview the production build locally
    "preview": "rsbuild preview"
  }
}
```

Refer to the [CLI](/guide/basic/cli) to learn about all available commands and options.

## Entry Module

By default, Rsbuild CLI uses `src/index.(js|ts|jsx|tsx)` as the entry module. You can modify the entry module using the [source.entry](/config/source/entry) option.

## Next Step

You may want:

import NextSteps from '@components/NextSteps';
import Step from '@components/Step';

<NextSteps>
  <Step
    href="/guide/start/features"
    title="All Features"
    description="Learn all features of Rsbuild"
  />
  <Step
    href="/guide/basic/configure-rsbuild"
    title="Config"
    description="Learn how to configure Rsbuild"
  />
  <Step
    href="/guide/start/glossary"
    title="Glossary"
    description="Learn about Rsbuild related concepts"
  />
</NextSteps>
